<template>
    <div>
        <el-table
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                align="center"
                style="width: 100%">
            <el-table-column type="expand" width="50">
                <template slot-scope="props">
                    <div class="expand-box">
                        <el-row>
                            <el-col :span="6">
                                <span class="title">申请状态:</span><span style="color: #ff9900;"> {{props.row.status_link}}</span>
                            </el-col>
                            <el-col :span="6">
                                <span class="title">发票号:</span><span> {{props.row.invoice_number}}</span>
                            </el-col>
                            <el-col :span="6" v-if="props.row.type == 2">
                                <span class="title">邮寄公司:</span><span> {{props.row.mailing_name}}</span>
                            </el-col>
                            <el-col :span="6" v-if="props.row.type == 2">
                                <span class="title">邮寄单号:</span><span> {{props.row.mailing_number}}</span>
                            </el-col>
                        </el-row>
                        <div style="padding: 6px 0 4px 0">
                            <span v-if="props.row.type == 1"><span class="title">发票类型:</span>电子发票</span>
                            <span v-if="props.row.type == 2 && props.row.tax_type == 1"><span class="title">发票类型:</span>常规发票</span>
                            <span v-if="props.row.type == 2 && props.row.tax_type == 2"><span class="title">发票类型:</span>增值税专用发票</span>
                            <span v-if="props.row.type == 2 && props.row.tax_type == 3"><span class="title">发票类型:</span>增值税普通发票</span>
                        </div>
                        <el-row style="line-height: 26px;color: #666;">
                            <el-col :span="12" v-if="props.row.type == 2 && props.row.tax_type !== 1">
                                <el-col :span="24"><span class="title">发票详情:</span></el-col>
                                <el-col :span="24"><span>公司名称:</span><span> {{props.row.company_name}}</span></el-col>
                                <el-col :span="24"><span>纳税人识别号:</span><span> {{props.row.tax_number}}</span></el-col>
                                <!--<el-col :span="24"><span>地址电话:</span><span> {{props.row.content}}</span></el-col>-->
                                <el-col :span="24"><span>开户行及账号:</span><span> {{props.row.bank}} {{props.row.bank_number}}</span></el-col>
                            </el-col>
                            <el-col :span="12" v-else>
                                <el-col :span="24"><span class="title">发票详情:</span></el-col>
                                <el-col :span="24"><span>开票人/单位:</span><span> {{props.row.company_name}}</span></el-col>
                                <el-col :span="24"><span>税号:</span><span> {{props.row.tax_number}}</span></el-col>
                                <el-col :span="24"><span>发票备注:</span><span> {{props.row.content}}</span></el-col>
                                <el-col :span="24"><span>发票金额:</span><span> {{props.row.price}}</span></el-col>
                            </el-col>

                            <el-col :span="12" v-if="props.row.type == 1">
                                <el-col :span="12"><span class="title">接收方式:</span></el-col>
                                <el-col :span="24"><span>邮件地址:</span><span> {{props.row.address}}</span></el-col>
                                <el-col :span="24"><span>手机号:</span><span> {{props.row.phone}}</span></el-col>
                                <el-col :span="24">
                                    <div style="display: flex;align-items: center">
                                        <div>
                                            <viewer :images="props.row.picture">
                                                <img v-for="src in props.row.picture" :src="src" :key="src" width="100"  v-if="src.indexOf('.pdf') == -1">
                                            </viewer>
                                        </div>
                                        <div >
                                           <span v-for="(src,index) in props.row.picture" :key="index"  v-if="src.indexOf('.pdf') !== -1">
                                                <div><a style="color: rgb(45, 140, 240);" :href="src" target="_blank">预览pdf图片</a></div>
                                            </span>
                                        </div>
                                    </div>


                                </el-col>
                            </el-col>
                            <el-col :span="12" v-else>
                                <el-col :span="12"><span class="title">接收方式:</span></el-col>
                                <el-col :span="24"><span>邮件收件人:</span><span> {{props.row.name}}</span></el-col>
                                <el-col :span="24"><span>邮寄电话:</span><span> {{props.row.phone}}</span></el-col>
                                <el-col :span="24"><span>邮件地址:</span><span> {{props.row.address}}</span></el-col>
                            </el-col>
                        </el-row>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请商户"
                    align="center">
                <template slot-scope="props">
                    <div>{{ props.row.user?props.row.user.name:'' }}</div>
                    <div>{{ props.row.user?props.row.user.phone:'' }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请金额"
                    align="center"
                    prop="price">
                <template slot-scope="props">
                    <div style="color: #2d8cf0;">{{ props.row.price }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    label="发票类型"
                    align="center">
                <template slot-scope="props">
                    <div>
                        <span v-if="props.row.type == 1">电子发票</span>
                        <span v-if="props.row.type == 2 && props.row.tax_type == 1">常规发票</span>
                        <span v-if="props.row.type == 2 && props.row.tax_type == 2">增值税专用发票</span>
                        <span v-if="props.row.type == 2 && props.row.tax_type == 3">增值税普通发票</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请时间"
                    sortable
                    align="center"
                    prop="created_at">
            </el-table-column>
            <el-table-column
                    label="状态"
                    align="center"
                    prop="status_link">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                    align="center">
                <template slot-scope="props">
                    <el-tooltip class="item" effect="dark" content="发票操作" placement="top">
                        <el-button type="warning" size="mini" circle @click="operation(props.row)" style="transform: scale(0.8)">操</el-button>
                    </el-tooltip>

                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="操作发票"
                :visible.sync="dialogVisible"
                width="600px">
            <invoicesDialog @successChange="successChange" :invoiceData="invoiceData" v-model="dialogVisible"></invoicesDialog>
        </el-dialog>
    </div>
</template>

<script>
    import invoicesDialog from './Dialog';
    export default {
        name: "table-box",
        components:{
            invoicesDialog
        },
        props: {
            tableData: {
                type: Array,
                default: ()=>{
                    return []
                }
            }
        },
        data() {
            return {
                dialogVisible: false,
                invoiceData: {},
                signImages: ['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg']
            }
        },
        methods: {
            successChange(val) {
                this.$emit('successChange');
            },
            operation(val) {
                this.invoiceData = val;
                this.dialogVisible = true;
                // this.$router.push({path:'/dialog/operation/invoice/' + id});
            },
            tableHeaderColor({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            }
        }
    }
</script>

<style scoped>

</style>
